<template>
  <div class="conversation-list" :class="{'default': !hasConversation}">
    <div v-if="hasConversation">
      <ConversationListItem 
        class="list-item" 
        v-for="conversation in conversationList" 
        :key="conversation.conversationId" 
        :conversation="conversation" />
    </div>
    <div style="color:gray;" v-else>暂无会话</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import ConversationListItem from './ConversationListItem.vue';

export default {
  components: {
    ConversationListItem
  },
  computed: {
    ...mapState({
      conversationList: state => state.conversation.conversationList
    }),
    hasConversation() {
      return this.conversationList.length > 0;
    }
  }
}
</script>

<style scoped>
.list-item :hover{
  background-color: #404953;
}
.default {
  padding-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow-y: scroll;
}
</style>